<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="#/b">click b</a></li>
        </ul>

        <!--<ng-view></ng-view>-->
         <div ng-view ></div> 
    </div>
    <script type="text/javascript">
    angular.module("myApp",["ngRoute"])
    .controller("aController",function($scope,$route){
        $scope.hello = "hello,a!";
    })
    .controller("bController",function($scope){
        $scope.hello = "hello,b!";
    })
    .controller("myCtrl",function($scope,$location){

        $scope.$on("$viewContentLoaded",function(){
//          console.log("ng-view content loaded!");
        });

        $scope.$on("$routeChangeStart",function(event,next,current){
            //event.preventDefault(); //cancel url change
//          console.log("route change start!");
        });
    })
    .config(['$locationProvider','$routeProvider',function($routeProvider,$locationProvider) {
          $locationProvider
           .when('/a', {
            templateUrl: 'a.html',
            controller: 'aController'
          })
         .when('/b', {
            templateUrl: 'b.html',
            controller: 'bController',
//          resolve: { //延时加载
//                // I will cause a 1 second delay
//                delay: function($q, $timeout) {
//                  var delay = $q.defer();
//                  $timeout(delay.resolve, 3000);
//                  return delay.promise;
//                }
//          }
        })
        .otherwise({
            redirectTo: '/a'
          });
    }]);
    </script>
</body>
</html>
